<h3>
    Genres: adding,editing,removing
</h3>

<div class="row my-row-standard">
    <div class="col-xs-3">
        <a href="#/genres/add" class="btn btn-block btn-lg btn-primary">Add genres</a>
    </div>
    <div class="col-xs-9">
        <div class="form-group">
            <input type="text" value="" placeholder="Type to search" class="form-control my-form-control"
                   ng-model="searchQuery">
        </div>
    </div>
</div>


<table class="table table-striped">
    <thead>
    <tr>
        <th class="col-xs-1">#</th>
        <th class="col-xs-9">Name</th>
        <th class="col-xs-2"></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="genre in genresPageCtrl.genres | filter:genresPageCtrl.filterSearchQuery">
        <td>{{genre.id}}</td>
        <td>{{genre.name}}</td>
        <td>
            <button class="btn btn-danger btn-large btn-block" ng-click="genresPageCtrl.remove($index)">
                Remove
            </button>
        </td>
    </tr>
    </tbody>
</table>

<my-goup-btn></my-goup-btn>